<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>个人资料</span>
      </div>
    </template>
    <el-avatar :size="80" :src="circleUrl"/>
    <el-upload ref="upload" class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :limit="1"
               :on-exceed="handleExceed" :auto-upload="false">
      <template #trigger>
        <el-button :icon="UploadFilled" type="primary">上传头像</el-button>
      </template>
    </el-upload>

    <el-descriptions :column="1">
      <el-descriptions-item label="用户名">{{ user.username }}</el-descriptions-item>
      <el-descriptions-item label="邮箱">{{ user.email }}
        <el-button text type="primary">修改</el-button>
      </el-descriptions-item>
      <el-descriptions-item label="手机号">{{ user.mobile }}
        <el-button text type="primary">修改</el-button>
      </el-descriptions-item>
      <el-descriptions-item label="当前登录IP">{{ user.loginIp }}</el-descriptions-item>
      <el-descriptions-item label="登录时间">{{ user.loginTime }}</el-descriptions-item>
    </el-descriptions>
  </el-card>
</template>

<script lang="ts" setup>
import {reactive, Ref, toRefs} from "vue";
import {ref, inject} from "vue";
import {getCategory} from "@/api/table";
import store from "@/store"
import {genFileId} from 'element-plus'
import {UploadFilled} from '@element-plus/icons-vue'
import type {UploadInstance, UploadProps, UploadRawFile} from 'element-plus'

const listDom: Ref<HTMLElement | null> = ref(null);
const page = {
  index: 1,
  size: 30,
  total: 0,
};
let input = ref("");
let user: any = store.state.user.info

const state = reactive({
  circleUrl:
      'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
})

const {circleUrl} = toRefs(state)

let list = ref([]);
let firstLoading = ref(true);
let loading = ref(true);
let active: any = inject("active");
let nomore = ref(false);

const upload = ref<UploadInstance>()

const handleExceed: UploadProps['onExceed'] = (files) => {
  upload.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  upload.value!.handleStart(file)
}

const getCategoryData = (init: boolean) => {
  loading.value = true;
  if (init || firstLoading.value) {
    firstLoading.value = false;
    page.index = 1;
    listDom.value && (listDom.value.scrollTop = 0);
  } else {
    if (page.index * page.size >= page.total) {
      loading.value = false;
      nomore.value = true;
      return;
    }
  }
  let params = {
    ...page,
    keyword: input.value,
  };
  getCategory(params)
      .then((res) => {
        if (page.index === 1) {
          list.value = res.data.list;
          active.value = list.value[0];
        } else {
          list.value = list.value.concat(res.data.list);
        }
        page.index += 1;
        page.total = res.data.total;
      })
      .catch((err) => {
        page.index = 1;
        page.total = 0;
        list.value = [];
      })
      .finally(() => {
        loading.value = false;
      });
};
getCategoryData(true);
</script>

<style lang="scss" scoped>
</style>